　body {
    margin: 0;
    padding: 0;
    background-color: #eeeeee;
}


.div1{
    width: 100px;
    height: 100px;
    background: green;
    display: inline-block;
}

.div2{
    width: 300px;
    height: 100px;
    background: yellowgreen;
    display: inline-block;
}

.div3{
    background: yellow;
}
.content {
    width: 800px;
    height: 320px;
    padding-left: 20px;
    margin: 80px auto;
    background-color: pink;
}
.item {
    width: 230px;
    height: 300px;
    text-align: center;
    margin-right: 20px;
    background-color: #FFF;
    float: left;
    position: relative;
    top: 0;
    overflow: hidden; /* 让溢出的内容隐藏起来。意思是让下方的橙色方形先躲起来 */
    transition: all .5s; /* 从最初到鼠标悬停时的过渡 */
}
.item img {
    margin-top: 30px;
}
.item .desc {
    position: absolute;
    left: 0;
    bottom: -80px;
    width: 100%;
    height: 80px;
    background-color: #ff6700;
    transition: all .5s;
}

/* 鼠标悬停时，让 item 整体往上移动5px，且加一点阴影 */
.item:hover {
    top: -5px;
    box-shadow: 0 0 15px #AAA;
}

/* 鼠标悬停时，让下方的橙色方形现身 */
.item:hover .desc {
    bottom: 0;
}